<!--
 * @Description: 上传组件
-->
<template>
  <el-upload
    :ref="ref"
    class="_ehl_upload"
    :action="action"
    :multiple="multiple"
    :headers="headers"
    :limit="limit"
    :drag="drag"
    :accept="accept"
    :file-list="fileList"
    :name="uploadKey"
    :show-file-list="showFileList"
    :auto-upload="autoUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :on-change="onChange"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
  >
    <!-- 选择框 -->
    <slot slot="trigger" name="upload" :data="{ list }">
      <div class="cpt_btn_blue">点击上传</div>
    </slot>
    <!-- 提示 -->
    <slot slot="tip" name="tip" :data="{ list }">
      <div class="_ehl_upload_tip">{{ hit }}</div>
    </slot>
    <!-- 自定义内容 -->
    <slot :data="{ list }" />
  </el-upload>
</template>

<script>
  import Vue from 'vue'
  import { Upload } from 'element-ui'
  Vue.use(Upload)
  export default {
    name: '',
    props: {
      value: { type: Object, default: () => {} },
      //上传列表
      fileList: {
        type: Array,
        default: () => [
          {
            status: 'success', //success,ready
            name: '.gitconfig',
            size: 78,
            percentage: 0,
            uid: 1640137648171,
            raw: {
              uid: 1640137648171,
            },
          },
        ],
      },
      //多文件上传
      multiple: { type: Boolean, default: () => false },
      //拖拽上传
      drag: { type: Boolean, default: () => false },
      //自动上传
      autoUpload: { type: Boolean, default: () => true },
      //是否显示已上传文件列表
      showFileList: { type: Boolean, default: () => true },
      //上传地址
      action: { type: String, default: () => 'action' },
      //上传地址
      accept: { type: String, default: () => '' },
      //上传提示
      hit: { type: String, default: () => '' },
      //上传个数
      limit: { type: Number, default: () => 2 },
      //上传的文件字段名
      uploadKey: { type: String, default: () => '' },
      //上传的文件请求头
      headers: { type: Object, default: () => {} },
    },
    data() {
      return {
        ref: `upload_ref_${Math.random()}`,
        list: [],
      }
    },
    created() {
      this.list = this.fileList
    },
    methods: {
      onSuccess(response, file, fileList) {
        this.$emit('success', response, file, fileList)
      },
      onError(err, file, fileList) {
        this.$emit('error', err, file, fileList)
      },
      onChange(file, fileList) {
        this.list = fileList
        this.$emit('change', file, fileList)
      },
      onRemove(file, fileList) {
        this.$emit('remove', file, fileList)
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定删除${file.name}吗`, '提示', {
          showClose: false,
        })
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 ${this.limit} 个文件，如需修改请删除后重新上传`,
        )
      },
      //手动上传调用
      submitUpload() {
        this.$refs[this.ref].submit()
      },
      //暂停上传调用
      abortUpload() {
        this.$refs[this.ref].abort()
      },
    },
  }
</script>
